window.onload =() =>{
//--------------------------------------------获取节点----------------------------------------------------
    var daima = document.getElementById("daima");
    var daima1 = document.getElementById("daima1");
//--------------------------------------------声明变量+控制器------------------------------------------------------
    var x = 0 ;//鼠标当前x轴
    var y = 0 ;//鼠标当前y轴
    var x0 = 0 ;//鼠标上次x轴
    var y0 = 0 ;//鼠标上次x轴
    var juli = 0 ;//鼠标的移动距离
    var juliControl = 50 ;//鼠标移动距离控制，单位：像素
    var timer = [] ;
    var count = 0 ;
    var sbKuosanSudu = 5;//控制鼠标扩散速度扩散速度
    var sbKsTimerJG = 42 ;//控制鼠标扩散速度扩散间隔时间

    var suijifanwei = 250;//控制随机行动随机范围
    var sjKuosansudu = 5 ;//控制随机行动扩散速度
    var sjKsTimerJG = 42 ;//控制随机行动圆饼扩散间隔时间


    //心形（第三个是坐标）
    var timerXinxing ;//心形计时器
    var sum = 0 ;//心形执行下标
    var arr=[[368,463],[394,442],[413,431],[434,415],[458,395],[482,373],[519,345],[539,323],[556,298],[571,279],[586,255],[599,230],[608,200],[613,171],[610,135],[597,98],[583,71],[562,53],[529,32],[503,31],[475,26],[442,27],[416,39],[392,55],[380,73],[370,91],[362,82],[350,67],[326,50],[303,37],[265,29],[244,27],[206,33],[184,45],[167,61],[152,75],[149,93],[140,105],[127,141],[124,167],[133,205],[139,241],[154,265],[171,286],[190,311],[219,341],[242,361],[272,386],[303,409],[337,430],[363,457]];
    var arrJG = 3 ;//控制心形数组取值间隔
    var xxKuosansudu = 1.8 ;//心形扩散速度
    var timerAuto = null ;//控制自动定时器
    var xxKsTimerJG = 42 ;//控制心形圆饼扩散间隔时间
    var xxexecDMJG = 120 ;//控制心形圆饼出现间隔

    var j = 0 ;//代码出现 - 记次数
    daima1.innerHTML = "";//置空代码段
    var timerDaima = null ;//代码出现计时器
    var exeDMsjjg = 42 ;//执行代码间隔时间

    var cssCotrol = [1,1,1] ;
        cssCotrol[0] = 0 ;//控制下标，哪个下标为0，执行哪个

//----------------------------------------执行按钮事件绑定-------------------------------------------
    var btns = document.querySelectorAll("#btnsControl>button");
    //1、随机行动按钮
    btns[0].innerHTML = "精灵飞舞" ;
    btns[0].onclick = function(){
        colorAutomatic();
        this.disabled = true ;
    }
    //2、心形行动
    btns[1].innerHtml = "心形" ;
    btns[1].onclick = function(){
        xinXing();
        this.disabled = true ;
    }

    //3、鼠标留尾巴
    btns[2].innerHtml = "鼠标留尾巴" ;
    btns[2].onclick = function(){
        document.onmousemove = run ;
        this.disabled = true ;
    }

    //4、代码出现
    btns[3].innerHtml = "代码出现" ;
    btns[3].onclick = function(){
        damaGoing();
        this.disabled = true ;
    }
    
    //清除所有
    btns[4].innerHtml = "代码出现" ;
    btns[4].onclick = function(){
        clearAllTimer();
    }

    //暂停所有
    btns[5].innerHtml = "代码出现" ;
    btns[5].onclick = function(){
        stopAllTimer();
    }
    
    function clearAllTimer(){
        stopAllTimer() ;//清除所有计时器且修改按钮可用

        j = 0 ;//代码出现 - 记次数

        sum = 0 ;//心形执行下标
        
    }
    function stopAllTimer(){
        clearInterval(timerAuto);//清除-自动
        clearInterval(timerXinxing);//清除-心形行动
        document.onmousemove = "" ;//清除-鼠标留尾巴
        clearInterval(timerDaima);//清除-代码出现

        for(var i = 0 ; i < btns.length - 1 ; i++){
            btns[i].disabled = "" ;
        }
    }

//----------------------------------------------封装函数------------------------------------------------------
    function run(){//鼠标划过事件
        var e = e || window.event ;//获取鼠标坐标

        x = e.clientX ;        
        y = e.clientY ;
        console.log(x,y);

        juli = Math.sqrt( Math.pow( x - x0 , 2) + Math.pow( y-y0 , 2 ));//鼠标的移动距离
        if(juli >= juliControl ){//距离控制并给x0,y0赋值
            x0 = x ;
            y0 = y ;
            creatPoint(x0,y0,sbKuosanSudu,sbKsTimerJG);
        }
    }
    function colorRandom(){ //生成随机颜色数
        var str = "0123456789abcdef" ;
        var color = "#" ;
        for(var i = 0 ; i < 6 ; i++ ){
            color += str[Math.floor(Math.random()*str.length)];
        }
        return color ;
    }
    function rdom(min,max){//根据固定最小，最大值获取随机数
        return Math.random()*(max - min) + min ;
    }
    function creatPoint(x,y,kuosanSudu,ksTimerJG){ //色饼留尾特效***************
        var div = document.createElement("div");
        var jicishu = 1 ;//局部变量累计次数
        var timerBaocun = null ;
        // var style1 = "position:absolute;left:" + (x-2) + "px;top:" + (y-2) + "px;" ;
        var style1 = "position:absolute;left:" + x + "px;top:" + y + "px;" ;
        div.style = style1 + cssAddControlff(0) ;
        // //div.style = style1 + "width:0px; height:0px; border-radius:50%;background:" + colorRandom() + ";opacity = 1;";
        // //div.style = style1 + "width:0px; height:0px; border-radius:50%;border:10px " + colorRandom() + " solid;opacity = 1;box-shadow: 10px 10px 10px " +colorRandom() +";";
        // div.style = style1 + "width:0px; height:0px; border-radius:50%;border:12px " + colorRandom() + " solid;opacity = 1;box-shadow: 10px 10px 10px ;";
        
        document.body.appendChild(div);
        
        timerBaocun = setInterval(function(){
            // div.style.left = (x - 2 - (kuosanSudu / 2 - 1) * jicishu ) + "px" ;//可作为左移特效
            // div.style.top = (y - 2 - (kuosanSudu / 2 - 1) * jicishu ) + "px" ;
            div.style.left = (x - (kuosanSudu  * jicishu ) + "px" );
            div.style.top = (y - (kuosanSudu  * jicishu ) + "px" );
            div.style.width = ( kuosanSudu * jicishu *2) + "px"  ;
            div.style.height = ( kuosanSudu * jicishu *2) + "px" ;
            // div.style.width = ( 4 + kuosanSudu * jicishu ) + "px"  ;
            // div.style.height = ( 4 + kuosanSudu * jicishu ) + "px" ;
            div.style.opacity = (1 - kuosanSudu * 0.01 * jicishu ) + "" ;
            if(div.style.opacity <= 0 ){
                clearInterval(timerBaocun);
                document.body.removeChild(div);
            }
            jicishu++;
            console.log(timer);

        },ksTimerJG);
        timer[count++] = timerBaocun;        
    }

    //-随机行动----------------------------------
    function colorAutomatic(){//自动初始化第一个圈
        var h = document.documentElement.clientWidth ;
        var w = document.documentElement.clientHeight ;
        console.log(h,w);

        // var x2 = rdom( 0 , w );//初始x，y
        // var y2 = rdom( 0 , h );
        var x2 = rdom( suijifanwei , w - suijifanwei );//初始x，y
        var y2 = rdom( suijifanwei , h -suijifanwei );

        creatRdmPoint(x2,y2,sjKuosansudu,sjKsTimerJG);//调用创建随机点
    }
    function creatRdmPoint(x,y,kuosanSudu,ksTimerJG){ //创建随机点**********
        var x3 = x + rdom( - suijifanwei , suijifanwei );
        var y3 = y + rdom( - suijifanwei , suijifanwei );

       
        timerAuto = setInterval(function(){//自动模式自动找位置
            x = x + rdom( - suijifanwei , suijifanwei ) ;//x赋值
            y = y + rdom( - suijifanwei , suijifanwei ) ;//y赋值
            if( (x - suijifanwei) < 0 ){
                x = x + suijifanwei ;
            }else if(( x + suijifanwei ) > document.body.offsetWidth){
                x = x - suijifanwei ;
            }
            
            if( (y - suijifanwei) < 0 ){
                y = y + suijifanwei ;
            }else if(( y + suijifanwei ) > document.body.offsetWidth){
                y = y - suijifanwei ;
            }
            creatPoint(x,y,kuosanSudu,ksTimerJG);//调用
        },100)

    }

    //-心   形----------------------------------
    function xinXing(){//心形
        
        timerXinxing = setInterval(function(){
            
            creatPoint(arr[sum][0],arr[sum][1]+50,xxKuosansudu,xxKsTimerJG);
            // sum++;
            sum += arrJG ;
            if(sum>arr.length-1){
                sum = 0 ;
            }
        },xxexecDMJG);
    }

    //-代码出现---------------------------------
    function damaGoing(){//执行代码出现函数
        
        var str = daima.innerHTML ;
        timerDaima = setInterval(function(){
            if(j >= str.length - 1){
                clearInterval(timerDaima);
            }
            daima1.innerHTML += str[j];
            j++;    
        },exeDMsjjg);

    }

    //圆饼变圆环
    function cssAddControlff(index){//*******要求严格，切勿擅自修改***********//圆饼控制字符串取值0,1,2，默认0
        if(index === cssCotrol[0]){//默认圆饼
            return "width:0px; height:0px; border-radius:50%;background:" + colorRandom() + ";opacity = 1;";           
        }
        if(index === cssCotrol[1]){//1-圆环，白色阴影
            return "width:0px; height:0px; border-radius:50%;border:12px " + colorRandom() + " solid;opacity = 1;box-shadow: 10px 10px 10px ;";
        }
        if(index === cssCotrol[2]){//2-圆环，随机阴影
            return "width:0px; height:0px; border-radius:50%;border:10px " + colorRandom() + " solid;opacity = 1;box-shadow: 10px 10px 10px " +colorRandom() +";";
        }
    }


}